<template>
	<z-nav-bar title="教学计划"></z-nav-bar>
	<view class="content">
		<view class="flex_sbc">
			<view class="z-font-32 text-w u-line-1">{{ planData.name }}</view>
			<view class="flex_fsc flex_sh">
				<view class="flex_fsc uni-mr-40" @click="editPlan">
					<image :src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'" class="icon-size-32"></image>
					<view class="uni-color-main">编辑</view>
				</view>
			</view>
		</view>
		<view v-for="course in planData.courseList || []" :key="course.id" class="common-box uni-mt-38">
			<view class="flex_fs">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-course.png'" class="icon-size"></image>
				<view class="uni-ml-14 width-100">
					<view class="text-w">{{ course.name }}</view>
					<view class="uni-color-grey z-font-24 uni-mt-8">训练课时 {{ course.duration }} 课时</view>
				</view>
			</view>

			<view class="line-spacing uni-my-34"></view>
			<view v-for="question in course.questionList || []" :key="question.id" class="course-item">
				<view>{{ question.name }}</view>
				<view class="flex_fsc">
					<view class="tag uni-mt-10">{{ question.descriptionTagName }}</view>
				</view>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="butChange"></bottom-box>
</template>

<script setup>
import { getPlanDetail } from '@/api/plan.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const planData = reactive(uni.getStorageSync('edit-plan') || {});
onShow(() => {
	getPlanDetail(planData.id).then(res => {
		Object.assign(planData, res)
	})
})

function editPlan() {
	uni.setStorageSync('edit-plan', planData);
	uni.navigateTo({
		url: '/pages/system/plan-edit',
		events: {
			editDone: (data) => {
				Object.assign(planData, data);
			}
		}
	});
}

// 底部按钮
const buts = [
	{
		label: '创建新的教学计划',
		bgColor: 'uni-orange-bg',
		width: 300
	},
	{
		label: '创建单独课程',
		bgColor: 'uni-color-main-bg',
		width: 300
	}
];

function butChange(e) {
	uni.removeStorageSync('edit-plan');
	uni.removeStorageSync('edit-course');
	const urls = ['/pages/system/plan-edit', '/pages/course/edit/edit'];
	uni.navigateTo({
		url: urls[e]
	});
}
</script>

<style lang="scss">
@import './plan.scss';
</style>
